<template>
<div>
  <div class="main">


    <el-card shadow="hover">
      <div slot="header">请输入信息</div>
      <el-row class="inp"  :gutter="30">
        <el-col :span="6">
          <el-input v-model="className" placeholder="请输入班级名称"  size="small" ></el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="search.cla" placeholder="请选择班级">
            <el-option
                v-for="item in classList"
                :key="item.type"
                :label="item.typeName"
                :value="item.type">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-time-select
              v-model="search.time"
              :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
              placeholder="选择时间">
          </el-time-select>

        </el-col>


      </el-row>
      <el-row :gutter="30" style="margin-top:10px">

        <el-col :span="6" :offset="18">
          <el-button type="primary" size="small" @click="doSearch">查询</el-button>
          <el-button type="danger" size="small">重置</el-button>



        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header">学生列表</div>
      <el-button type="primary" @click="addNew">添加班级</el-button>
      <el-table
          :data="clist"
          border
          style="width:70%">
        <el-table-column
            fixed
            prop="startTime"
            label="开始时间"
            width="200">
        </el-table-column>
        <el-table-column
            prop="className"
            label="班级名称"
            width="160">
        </el-table-column>
        <el-table-column
            prop="endTime"
            label="结束时间"
            width="160">
        </el-table-column>
        <el-table-column
            prop="desc"
            label="描述:"
            width="300">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="dialogVisible(scope.row) ">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100">
      </el-pagination>

    </el-card>

  </div>


  <!-- 弹窗内容 -->

  <classlog ref="logs" @refesh="classlist"></classlog>







</div>
</template>

<script>
import classList from '@/api/xy/clazz'
import clalast from '@/api/xy/clalast'
import classlog from './Clazzlog'
export default{
    name:"xycla",
  components:{
      classlog
  },
data(){
return{
  className:"",
  type:'',
  classList:[
    {
      type: 0,
      typeName: '前端'
    },
    {
      type: 1,
      typeName: 'UI'
    },
  ],
  currentPage1: 5,
  currentPage2: 5,
  currentPage3: 5,
  currentPage4: 4,
  search: {},

  clist:[],

}

},
methods:{
  handleClick(row) {
    console.log(row);
  },
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
  },
  //获取班级列表
  classlist(){
    classList({
      start: 1,
      limit:100,
      className:this.className,
      type:this.search.cla
    })
        .then(res=>{
          console.log(res)
          this.clist = res.data.list
        })
  },
  //打开编辑弹窗
  dialogVisible(val){
  this.$refs.logs.openlog(val.id)
    console.log(111)

  },
  //打开新增窗口
  addNew(){
  this.$refs.logs.openlog()
  },
  //删除某一行
  del(val){
    clalast.classDel({
      id:val.id
    })
    .then(res=>{
      console.log(res)
      if(res.code == true){
        this.$message('删除成功!!!')
        this.classlist()
      }else {
        this.$message('删除失败!!!')

      }
    })
  },
  // 搜索
  doSearch(){
    this.classlist()
  }
},
  created(){
    this.classlist()
  }

}

</script>
<style lang='scss' scoped>
.main{
  margin: 30px;


}
</style>
